<!--
单选/多选
props：
check:是否选中
value：值
-->
<template>
  <div class="container">
      <i class="fas" :class="{'fa-check':check}" @click="onClick"></i><span>{{value}}</span>
  </div>
</template>
<style lang="less" scoped>
@import url('./theme.less');
.container{
    width: 100%;
    display:inline-block;
    .fas{
        width: @icon-size;
        height: @icon-size;
        display:inline-block;
        border-radius: @icon-size;
        line-height: @icon-size;
        text-align: center;
        margin: 0 10px;
        border: 1px solid #909399;
        display:inline-block;
        box-sizing: border-box;
        font-size: 10px;
        float: left;
    }
    .fa-check{
        width: @icon-size;
        height: @icon-size;
        font-size: 10px;
        background: @icon-background;
        color: #ffffff;
        line-height: @icon-size;
        border-radius: @icon-size;
        text-align: center;
        margin: 0 10px;
        border: 1px solid @icon-background;
    }
    span{
        font-size: 15px;
        line-height: @icon-size;
        display:inline-block;
        vertical-align: middle;
        float: left;
    }
}
</style>
<script>
export default {
    props:{
        check:{
            default:false,
            type:Boolean
        },
        value:{}
    },
    methods:{
        onClick:function(){
            this.$emit("update:check",!this.check);
        }
    }
}
</script>